<template>

  <div id="app">
    <el-row :gutter="20">
      <el-col :md="13" class="hidden-sm-and-down">
        <el-row>
          <Info/>
        </el-row>
        <el-row>
          <Presetting/>
        </el-row>
        <el-row>
          <ModelSettingList/>
        </el-row>
      </el-col>
      <el-col :md="11">
        <el-row>
          <ModelStateList/>
        </el-row>
        <el-row>
          <ModelFileList/>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>


<script>

import {mapState} from 'vuex'
import Hub from '@/api/hub'
import {socket} from "@/api/sock";
import Presetting from "@/components/presetting"
import ModelSettingList from "@/components/modelSettingList"
import ModelStateList from "@/components/modelStateList"
import ModelFileList from "@/components/modelFileList"
import 'element-ui/lib/theme-chalk/display.css';
import Info from "@/components/info";


export default {
  name: 'App',
  components: {
    Info,
    Presetting,
    ModelSettingList,
    ModelStateList,
    ModelFileList,
  },
  computed: {
    ...mapState({}),
  },
  created() {
    window.addEventListener('beforeunload', this.beforeunloadHandler)

    this.io = socket
    this.io.on('model_list_report', (args) => {
      this.$store.dispatch('setModelList', args)
    })
    this.io.on('model_detail_list_report', (args) => {
      this.$store.dispatch('setModelDetailList', args)
    })
    this.io.on('model_state_report', (args) => {
      this.$store.dispatch('setModelState', args)
    })
    this.io.on('model_state_list_report', (args) => {
      this.$store.dispatch('setModelStateList', args)
    })
    this.io.on('model_error_report', (args) => {
      console.log('xxxxx Error occurred! xxxxx')
      console.log(args)
      console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxx')
    })
    this.io.on('info_report', (args) => {
      console.log('args')
      this.$store.commit('updateInfo', args)
    })
    this.io.on('model_upload_state_report', (args) => {
      console.log(args)
    })

    // this.$store.dispatch('fetchRemoteModelList')
  },
  data() {
    return {
      io: null,
      progress: Hub.progress
    }
  },
  methods: {
    beforeunloadHandler: function (e) {
      e.returnValue = 'You can not refresh when releasing'
    }
  },
}

</script>


<style>

@import "assets/hwcss/common.css";

.el-row {
  margin: 5px 0;
  padding: 5px;
}

/*@import "assets/hwcss/checkbox.css";*/
/*@import "assets/hwcss/text.css";*/
/*@import "assets/hwcss/button.css";*/
/*@import "assets/hwcss/chooser.css";*/
/*@import "assets/hwcss/tinytab.css";*/

/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/

/*body {*/
/*  background: var(--c13);*/
/*}*/

/*#modelState {*/
/*  min-height: 400px;*/
/*}*/

/*#modelFile {*/
/*  min-height: 400px;*/
/*}*/
</style>
